<template>
  <el-card>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{path:'/welcome'}">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!--修改对话框-->
    <el-row :gutter="12">
      <el-col :span="6">
        <el-button type="success"
                   icon="el-icon-plus"
                   @click="addDialog">添加</el-button>
      </el-col>
    </el-row>
    <!--表格列表-->
    <el-table :data="tableData">
      <el-table-column prop="userId"
                       label="用户id"></el-table-column>
      <el-table-column prop="username"
                       label="用户名"></el-table-column>
      <el-table-column prop="name"
                       label="姓名"></el-table-column>
      <el-table-column prop="age"
                       label="年龄"></el-table-column>
      <el-table-column prop="sex" :formatter="changeSex"
                       label="性别"></el-table-column>
      <el-table-column prop="idCard"
                       label="身份证"></el-table-column>
      <el-table-column prop="phone"
                       label="手机号"></el-table-column>
      <el-table-column prop="address"
                       label="地址"></el-table-column>
      <el-table-column prop="auth"
                       label="权限">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.auth==0"
                  type="danger">用户</el-tag>
          <el-tag v-else-if="scope.row.auth==1"
                  type="success">管理员</el-tag>
        </template>
      </el-table-column>

      <el-table-column align="center"
                       label="操作">
        <template slot-scope="scope">
          <el-button type="success"
                     @click="getOne(scope.row)">修改</el-button>
          <el-button type="danger"
                     v-show="scope.row.auth == 0"
                     @click="deleteUser(scope.row)">删除</el-button>
        </template>

      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-pagination @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="pager.current"
                   :page-size="pager.size"
                   :page-sizes="[5, 10, 15, 20]"
                   :total="pager.total"
                   layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    <!--修改对话框-->
    <el-dialog :visible.sync="editFlag"
               :close-on-click-modal="false"
               title="修改用户信息">
      <el-form>
        <el-form-item label="用户id">
          <el-input v-model="users.userId"
                    disabled></el-input>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="users.username"
                    placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="users.name"
                    placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="users.age"
                    placeholder="请输入年龄"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-input v-model="users.sex == 0 ? '男':'女'"
                    placeholder="请输入性别"></el-input>
        </el-form-item>
        <el-form-item label="身份证">
          <el-input v-model="users.idCard"
                    placeholder="请输入身份证"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="users.phone"
                    placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="users.address"
                    placeholder="请输入地址"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="editFlag = false">取 消</el-button>
        <el-button type="primary"
                   @click="update">确 定</el-button>
      </div>
    </el-dialog>
    <!--添加对话框-->
    <el-dialog :visible.sync="addFlag"
               :close-on-click-modal="false"
               title="添加用户信息">
      <el-form>
        <el-form-item label="用户名">
          <el-input v-model="users.username"
                    placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="users.name"
                    placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="users.age"
                    placeholder="请输入年龄"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-input v-model="users.sex"
                    placeholder="请输入性别"></el-input>
        </el-form-item>
        <el-form-item label="身份证">
          <el-input v-model="users.idCard"
                    placeholder="请输入身份证"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="users.phone"
                    placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="users.address"
                    placeholder="请输入地址"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="addFlag = false">取 消</el-button>
        <el-button type="primary"
                   @click="save">确 定</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
import {deleteUser, getOneUser, saveUser, updateUser, userList} from "../../api/api";

export default {
  data () {
    return {
      addFlag: false, // 显示添加对话框的标记
      editFlag: false,
      tableData: [],
      pager: {
        current: 1,
        size:5,
        total: 0
      },

      userList: [],
      users: {
        userId: 0,
        username: '',
        name: '',
        age: '',
        sex: '',
        idCard: '',
        phone: '',
        address: '',
      }

    }
  },
  methods: {
    addDialog(){
      this.reset()
      this.addFlag = !this.addFlag;
    },
    reset(){
      this.users={
        userId: 0,
        username: '',
        name: '',
        age: '',
        sex: '',
        idCard: '',
        phone: '',
        address: '',
      }
    },
    changeSex(){
      let sex = this.users.sex;
      return  this.users.sex = (sex == 0 ) ? '男' : '女'
    },
    getOne (row) {
      this.editFlag = !this.editFlag;
      getOneUser(row.userId)
        .then((response) => {
          if (response.code === 200) {
            this.users = response.data;
          } else {
            this.$message.error("获取用户id为：" + row.userId + "的接口出错")
          }
        });
    },
    deleteUser(row){
      deleteUser(row.userId)
        .then((response) => {
          if (response.code === 200) {
            this.$message.success(response.msg);
            this.listUsers(this.pager);
          } else {
            this.$message.error(response.msg);
          }
      });
    },

    update(){
      //前端校验,加钱才做
      //发送请求到后端
      updateUser(this.users)
        .then((response) => {
          if (response.code === 200){
            this.$message.success(response.msg);
            this.pager.size = 5;
            this.pager.current = 1;
            this.listUsers(this.pager);
            this.editFlag = false
          }
          else{
            this.$message.error(response.msg);
          }

        });
    },
    save(){

      saveUser(this.users)
        .then((response) => {
          if (response.code === 200){
            this.$message.success(response.msg);
            this.pager.size = 5;
            this.pager.current = 1;
            this.listUsers(this.pager);
            this.addFlag = false
          }
          else{
            this.$message.error(response.msg);
          }
        });
    },

    handleCurrentChange (val) {
      console.info("改变分页起始数据" + val);
      this.pager.current = val;
      this.listUsers(this.pager);
    },
    handleSizeChange (val) {
      console.info("改变每页显示的最大条数" + val);
      this.pager.size = val;
      console.log(this.pager)
      this.listUsers(this.pager);
    },
    listUsers () {
      userList(this.pager)
        .then((response) => {
          if (response.code === 200) {
            this.$message.success(response.msg);
            this.tableData = response.rows;
            // this.pager.current = response.current;
            // this.pager.size = response.size;
            this.pager.total = response.total;
          }
          else {
            this.$message.error(response.msg)
          }
        });
    },
  },
  created () {

    this.listUsers(this.pager);
  }
}
</script>

<style>
.el-breadcrumb {
  padding-bottom: 12px;
}
.el-pagination {
  padding-top: 12px;
}
</style>
